<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" :fullFlag="false" width="70%">
    <el-descriptions :column="3" border >
        <el-descriptions-item label="订单号" label-align="center">{{formData.orderId}}</el-descriptions-item>
        <el-descriptions-item label="运单号" label-align="center">{{formData.mainOrderId}}</el-descriptions-item>
        <el-descriptions-item label="分单号" label-align="center">{{formData.subOrderId}}</el-descriptions-item>
        <el-descriptions-item label="目的地城市" label-align="center">{{formData.destinationCityName}}</el-descriptions-item>
        <el-descriptions-item label="分单号目的地城市" label-align="center">{{formData.subDestCityName}}</el-descriptions-item>
        <el-descriptions-item label="件数" label-align="center">{{formData.warehouseNumber}}</el-descriptions-item>
        <el-descriptions-item label="重量(kg)" label-align="center">{{formData.weight}}</el-descriptions-item>
        <el-descriptions-item label="体积" label-align="center">{{formData.volume}}</el-descriptions-item>
        <el-descriptions-item label="是否随机" label-align="center">{{formData.randomFlag==1?'是':'否'}}</el-descriptions-item>
        <el-descriptions-item label="通关" label-align="center">{{formData.customsClearance}}</el-descriptions-item>
        <el-descriptions-item label="是否通过仓库" label-align="center">{{formData.storage==1?'是':'否'}}</el-descriptions-item>
        <el-descriptions-item label="是否需要特殊防护" v-if="formData.storage == 1" label-align="center">{{formData.specialProtection==1?'是':'否'}}</el-descriptions-item>
        <el-descriptions-item label="是否自带危包" v-if="formData.storage == 1" label-align="center">{{formData.comesDangerousBag==1?'是':'否'}}</el-descriptions-item>
        <el-descriptions-item label="地服 CA/BGS" label-align="center">{{formData.storage==1?'CA':'BGS'}}</el-descriptions-item>
        <el-descriptions-item label="装载" label-align="center">{{formData.freight}}</el-descriptions-item>
        <el-descriptions-item label="rac" label-align="center">{{formData.rac==1?'是':'否'}}</el-descriptions-item>
        <el-descriptions-item label="航班号" label-align="center">{{formData.flightNumber}}</el-descriptions-item>
        <el-descriptions-item label="航班日期" label-align="center">{{formData.flightDate}}</el-descriptions-item>
        <el-descriptions-item label="品名/型号" :span="3" label-align="center">{{formData.productNameMode}}</el-descriptions-item>
        <el-descriptions-item label="包装备注" :span="3" label-align="center">{{formData.note}}</el-descriptions-item>
        <el-descriptions-item label="类别" :span="3" label-align="center">
            <div v-for="(item, index) in mainCategoryInfoList" :key="index" style="display:inline-block;width:120px;height:140px;">
                <div style="display:flex;flex-direction:column;align-items:center;">
                    <img style="width:64px;height:64px;" :src="item.src"/>
                    <div style="height:20px;color:000000;font-size:14px;padding-top:10px;">{{item.IMP+' '+item.number}}</div>
                    <div style="height:20px;color:000000;font-size:14px;padding-top:10px;">{{item.text}}</div>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="辅助类别" :span="3" label-align="center">
            <div v-for="(item, index) in subCategoryInfoList" :key="index" style="display:inline-block;width:120px;height:140px;">
                <div style="display:flex;flex-direction:column;align-items:center;">
                    <img style="width:64px;height:64px;" :src="item.src"/>
                    <div style="height:20px;color:000000;font-size:14px;padding-top:10px;">{{item.IMP+' '+item.text}}</div>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="申报文件" :span="3" label-align="center">
            <div class="flex items-center" v-for="(item, index) in shenbaoFiles" :key="index">
                <span>{{ item.name }}</span>
                <div class="ml-10px">
                    <el-link
                    :href="item.id"
                    :underline="false"
                    download
                    target="_blank"
                    type="primary"
                    >
                    下载
                    </el-link>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="制单文件" :span="3" label-align="center">
            <div class="flex items-center" v-for="(item, index) in zhidanFiles" :key="index">
                <span>{{ item.name }}</span>
                <div class="ml-10px">
                    <el-link
                    :href="item.id"
                    :underline="false"
                    download
                    target="_blank"
                    type="primary"
                    >
                    下载
                    </el-link>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="报关文件" :span="3" label-align="center">
            <div class="flex items-center" v-for="(item, index) in baoguanFiles" :key="index">
                <span>{{ item.name }}</span>
                <div class="ml-10px">
                    <el-link
                    :href="item.id"
                    :underline="false"
                    download
                    target="_blank"
                    type="primary"
                    >
                    下载
                    </el-link>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="鉴定报告" :span="3" label-align="center">
            <div class="flex items-center" v-for="(item, index) in jiandingFiles" :key="index">
                <span>{{ item.name }}</span>
                <div class="ml-10px">
                    <el-link
                    :href="item.id"
                    :underline="false"
                    download
                    target="_blank"
                    type="primary"
                    >
                    下载
                    </el-link>
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="DGD" :span="3" label-align="center">
            <div class="flex items-center" v-for="(item, index) in dgdFiles" :key="index">
                <span>{{ item.name }}</span>
                <div class="ml-10px">
                    <el-link
                    :href="item.id"
                    :underline="false"
                    download
                    target="_blank"
                    type="primary"
                    >
                    下载
                    </el-link>
                </div>
            </div>
        </el-descriptions-item>
    </el-descriptions>
    <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">入仓照片</div>
    <LocalImagesUplaod v-model="receiptList" :limit="20" :disabled="true"/>
    <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">包装照片</div>
    <LocalImagesUplaod v-model="packList" :limit="20" :disabled="true"/>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
    <MainCateGory ref="MainCateGoryRef" @success="successMainCateGory"/>
    <SubCateGory ref="SubCateGoryRef" @success="successSubCateGory"/>
  </Dialog>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash-es'
import { CargoInfoApi, CargoInfoVO } from '@/api/business/cargoinfo'
import {testMobile} from '@/utils/test'
import {useUserStore} from '@/store/modules/user'
import {listUserByRole} from '@/api/system/user'
import {CompanyApi} from '@/api/business/company'
import {AppUserApi} from '@/api/system/appuser'
import MainCateGory from '../cargoinfo/mainCategory.vue'
import SubCateGory from '../cargoinfo/subCategory.vue'
import {formatDate} from '@/utils/formatTime'

import addImg from '@/assets/image/add.png'


/** 货物资料 表单 */
defineOptions({ name: 'CargoInfoView' })

const userStore = useUserStore();

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：kefu -客服；cangku - 仓库
const formData = ref({
  id: undefined,
  orderId: '',
  mainOrderId:'',
  subOrderId: '',
  destinationCityId: undefined,
  subDestCityId:undefined,
  serviceName:userStore.user.nickname,
  serviceGrantStatus:0,
  serviceOtherId:undefined,
  warehouseNumber:undefined,
  weight:undefined,
  volume:undefined,
  productNameMode:undefined,
  note:'',
  randomFlag:0,
  customsClearance:'',
  theGround:undefined,
  companyId:undefined,
  mainCustomerId:null,
  subCustomerId1:null,
  subCustomerId2:null,
  freight:'',
  rac:0,
  flightNumber:'',
  flightDate:'',
  mainCategoryCode:'',
  storage:1,
  subCategoryCode:'',
  specialProtection:0,
  comesDangerousBag:0,
})

const shenbaoFiles = ref([])
const zhidanFiles = ref([]);
const baoguanFiles = ref([]);
const jiandingFiles = ref([]);
const dgdFiles = ref([]);


const MainCateGoryRef = ref();
const mainCategoryInfoList = ref([]);

const SubCateGoryRef = ref();
const subCategoryInfoList = ref([]);

const receiptList = ref([]);
const packList = ref([]);

/** 打开弹窗 */
const open = async (id?: number, type?) => {
  dialogVisible.value = true
  dialogTitle.value = "订单详情"
  formType.value = type;
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await CargoInfoApi.getCargoInfo(id)
      mainCategoryInfoList.value = MainCateGoryRef.value.findMainCateGory(formData.value.mainCategoryCode);
      subCategoryInfoList.value = SubCateGoryRef.value.findMainCateGory(formData.value.subCategoryCode);
      
      if(formData.value.flightDate)
        formData.value.flightDate = formatDate(formData.value.flightDate, 'YYYY-MM-DD')
      let data = await CargoInfoApi.getCreateFile(id);
      shenbaoFiles.value = data.shenbaoFiles.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
      zhidanFiles.value = data.zhidanFiles.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
      baoguanFiles.value = data.baoguanFiles.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
      jiandingFiles.value = data.jiandingFiles.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
      dgdFiles.value = data.dgdFiles.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });

      let ffiles = await CargoInfoApi.getPackInfo(id);
      receiptList.value = ffiles.receiptList.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
      packList.value = ffiles.packList.map(item=>{
        return {
          id:item.fileId,
          name:item.fileName
        }
      });
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    orderId: '',
    mainOrderId:'',
    subOrderId: '',
    destinationCityId: undefined,
    subDestCityId:undefined,
    serviceName:userStore.user.nickname,
    serviceGrantStatus:0,
    serviceOtherId:undefined,
    warehouseNumber:undefined,
    weight:undefined,
    volume:undefined,
    productNameMode:undefined,
    note:'',
    randomFlag:0,
    customsClearance:'',
    theGround:undefined,
    companyId:undefined,
    mainCustomerId:null,
    subCustomerId1:null,
    subCustomerId2:null,
    freight:'',
    rac:0,
    flightNumber:'',
    flightDate:'',
    mainCategoryCode:'',
    storage:1,
    subCategoryCode:'',
    specialProtection:0,
    comesDangerousBag:0,
  }
  mainCategoryInfoList.value = [];
  subCategoryInfoList.value = [];
  shenbaoFiles.value = [];
  zhidanFiles.value = []
  baoguanFiles.value = []
  jiandingFiles.value = []
  dgdFiles.value = []
}

</script>
